<template>
  <div id="beijing">
    <div id="a-tittle">
      <div id="left" @click="back">⬅</div>
      班型详情
    </div>
    <div id="xiang-kuang">
      <div id="top-xiang">
        <div class="xiang-top">
          <div id="xiang-na">{{ this.xiang.name }}</div>
          <div id="xiang-pr">￥{{ this.xiang.price }}</div>
        </div>
        <div id="top-type">
          <div id="type" v-for="(ty, i) in courseLabels" :key="i">{{ ty }}</div>
        </div>
      </div>
      <div id="middle-xiang">
        <div class="class">
          <div id="ziti">班级详情</div>
          <div id="biaoge">
            <table>
              <tr>
                <th>练车人数</th>
                <td>
                  <p>科目二:{{ student }};</p>
                  <p>科目三:{{ student }};</p>
                </td>
              </tr>
              <tr>
                <th>接送方式</th>
                <td>{{ xiang.pickUpTypeName }}</td>
              </tr>
              <tr>
                <th>拿本时间</th>
                <td>{{ time }}左右</td>
              </tr>
              <tr>
                <th>练车时间</th>
                <td>{{ xiang.learningTime }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div id="miaoshu">
        <div id="shu-buttom">班型描述</div>
        <div class="shu-wen" :style="height">
          <div id="shu-wen">
            {{ xiang.description }}
          </div>
        </div>
      </div>
    </div>
    <div id="bm-x" @click="pan()">报名咨询</div>
    <zixun @pan="pan()" v-if="zixuan"></zixun>
  </div>
</template>

<script>
import zixun from "../components/zixun.vue";
export default {
  name: "xiangqing",
  data() {
    return {
      xiang: [],
      courseLabels: [],
      student: "",
      time: "",
      height: "",
      zixuan: false,
    };
  },
  components: {
    zixun,
  },
  methods: {
    pan(msg) {
      this.zixuan = !this.zixuan;
    },
    back() {
      this.$router.back();
    },
    jieshou() {
      this.xiang = this.$route.params.xiang;
      this.courseLabels = this.xiang.courseLabels;
      if (this.xiang.studentsPerCarDesc) {
        this.student = this.xiang.studentsPerCarDesc;
      } else {
        this.student = "多人一车";
      }
      if (this.xiang == 0) {
        this.time = "60天";
      } else {
        this.time = "90天";
      }
    },
  },
  created() {
    this.jieshou();
  },
  watch: {
    $route(to, from) {
      if (to.path == "/xiangqing") {
        this.jieshou();
      }
    },
  },
};
</script>

<style>
#beijing {
  overflow: hidden;
  width: 100%;
  height: 95vh;
  background: rgb(238, 238, 238);
}
#a-tittle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 5vh;
  background: rgb(29, 172, 249);
  font-size: 4vw;
  color: white;
  line-height: 8vw;
  display: flex;
  z-index: 9999;
}
#left {
  flex: 0;
  width: 10vw;
  height: 100%;
}
#top-xiang {
  width: 100%;
  height: 15vh;
  background: white;
}
.xiang-top {
  margin: 0 auto;
  width: 90%;
  display: flex;
  height: 8vh;
  font-size: 3vh;
  line-height: 8vh;
  justify-content: space-between;
}
#xiang-na {
  font-weight: 600;
}
#xiang-pr {
  color: rgb(29, 172, 249);
  font-weight: 550;
}
#top-type {
  width: 60%;
  height: 3vh;
  display: flex;
  margin-left: 3.5vw;
  justify-content: space-between;
}
#type {
  width: 27%;
  height: 100%;
  font-size: 1vh;
  text-align: center;
  color: rgb(29, 172, 249);
  background: rgb(198, 234, 253);
}
#middle-xiang {
  margin-top: 2vh;
  width: 100%;
  height: 35vh;
  background: white;
}
.class {
  margin: 0 auto;
  width: 90%;
  height: 100%;
}
#ziti {
  height: 10vh;
  font-size: 3vh;
  font-weight: 600;
  line-height: 10vh;
}
#biaoge {
  margin: 0 auto;
  width: 90%;
  height: 65%;
  display: flex;
  border: 0.1vh solid rgb(238, 238, 253);
}
table {
  width: 100%;
  height: 100%;
}
tr {
  width: 100%;
  height: 33%;
}
th {
  width: 35%;
  border: 0.1vh solid rgb(238, 238, 253);
}
td {
  border: 0.1vh solid rgb(238, 238, 253);
}
#miaoshu {
  margin-top: 2vh;
  width: 100%;
  background: white;
}
#shu-buttom {
  width: 90vw;
  font-size: 3vh;
  font-weight: 600;
  line-height: 10vh;
  height: 5vh;
  height: 100%;
  margin: 0 auto;
}
#shu-wen {
  width: 100%;
  color: rgb(122, 122, 122);
  white-space: pre-line;
  padding-bottom: 2vh;
}
.shu-wen {
  margin: 0 auto;
  width: 93vw;
}
#xiang-kuang {
  width: 100%;
  height: 90%;
  overflow-y: scroll;
  margin-top: 6vh;
}
#bm-x {
  width: 100%;
  height: 10vh;
  position: fixed;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to right,
    rgb(0, 222, 229),
    rgb(0, 142, 248)
  );
  text-align: center;
  line-height: 10vh;
  color: white;
  font-size: 3vh;
}
</style>
